import React, { useRef, useEffect } from "react";
import { X, PencilLine, Trash2, Plus } from "lucide-react";
import PromptTemplateApi from "@/api/promptTemplate";
import UpdatePrompt from "./UpdatePrompt";
import Button from "@mui/material/Button";

const PromptTemplate = ({ setPromptState }) => {
  const updatePromptRef = useRef(null);
  const lifestyleEmojis = useRef([
    "🍎", // 苹果
    "🍞", // 面包
    "☕", // 咖啡
    "🍕", // 披萨
    "🍣", // 寿司
    "🍦", // 冰淇淋
    "🥗", // 沙拉
    "🍔", // 汉堡
    "🍩", // 甜甜圈
    "🥛", // 牛奶
    "🍉", // 西瓜
    "🍇", // 葡萄
    "🍓", // 草莓
    "🥑", // 鳄梨
    "🍪", // 饼干
    "🍫", // 巧克力
    "🍊", // 橙子
    "🌮", // 墨西哥卷饼
    "🥙", // 包裹
    "🍳", // 煎蛋
  ]);

  //   获取提示词模板
  const getPromptTemplateFn = async () => {
    try {
      let res = await PromptTemplateApi.getPromptTemplate();
    } catch (error) {
      console.log(error);
    }
  };

  const addPrompt = () => {
    updatePromptRef.current.getPage();
  };

  useEffect(() => {
    getPromptTemplateFn();
  }, []);

  return (
    <div className="w-full bg-[#fff] p-[8px] min-h-[100px] max-h-[150px] overflow-auto flex flex-col items-center justify-center rounded-[8px] box-border border-solid border  border-[#e5e5e5]">
      <div className="w-full flex justify-between items-center mb-[10px] px-[10px]">
        <span className=" font-bold text-[14px]">常用语</span>
        <X
          onClick={() => setPromptState(false)}
          strokeWidth={1}
          size={24}
          className=" cursor-pointer text-[12px]"
        />
      </div>

      <div className="w-full flex-1 overflow-auto">
        <div className="flex justify-between items-center hover:bg-[rgb(225,228,233)] p-[10px] box-border rounded-[10px] cursor-pointer group ">
          {/* bg-[rgba(39,39,49,0.1)] */}
          <div className="w-[30px] h-[30px]   mr-[5px] bg-[rgba(39,39,49,0.1)]   rounded  text-[20px] flex justify-between items-center">
            🍓
          </div>
          <div className=" flex-1 text-ellipsis overflow-hidden whitespace-nowrap">
            我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主我是一头大业主
          </div>

          <div className=" hidden opacity-0 group-hover:opacity-[1] group-hover:block">
            <div className="flex justify-between items-center w-[50px]">
              <PencilLine size={18} />
              <Trash2 size={18} color="#ec0909" />
            </div>
          </div>
        </div>
      </div>

      <div className="w-full mt-[10px] hover:bg-[rgb(225,228,233)] p-[5px] rounded-[8px] cursor-pointer">
        <div onClick={addPrompt} className="flex justify-start">
          <Plus size={20} className="mr-[5px]" />
          添加提示词
        </div>
      </div>

      <UpdatePrompt ref={updatePromptRef}></UpdatePrompt>
    </div>
  );
};

export default PromptTemplate;
